<!-- 订单详情 -->
<template>
  <div>
    <div class="m-3">
      <Card>
        <div class="text-xl pb-2">
          <span> 订单信息 </span>
          <Tag :color=orderStatusTag?.dictType>{{ orderStatusTag?.dictLabel }}</Tag>
        </div>
        <div class="grid grid-cols-3 gap-2 bg-[#F7F8FA] p-3 rounded mb-3">
          <div>
            <div class="pb-3 text-[16px]">付款信息</div>
            <Descriptions :column="1" size="small">
              <DescriptionsItem label="实付金额">{{ orderInfo?.payAmount }}</DescriptionsItem>
              <DescriptionsItem label="付款方式">{{ orderInfo?.payMode }}</DescriptionsItem>
              <DescriptionsItem label="付款时间">{{ orderInfo?.payTime }}</DescriptionsItem>
            </Descriptions>
          </div>
          <div>
            <div class="pb-3 text-[16px]">物流信息</div>
            <Descriptions :column="1" size="small">
              <DescriptionsItem label="订单状态"><Tag :color=orderStatusTag?.dictType>{{ orderStatusTag?.dictLabel }}</Tag></DescriptionsItem>
              <DescriptionsItem label="物流类型">{{ orderInfo?.logisticsModeText }}</DescriptionsItem>
            </Descriptions>
          </div>
          <div>
            <div class="pb-3 text-[16px]">其他信息</div>
            <Descriptions :column="1" size="small">
              <DescriptionsItem label="订单来源">{{ orderInfo?.shopName }}</DescriptionsItem>
              <DescriptionsItem label="出单板块">{{ orderInfo?.templateName }}</DescriptionsItem>
              <DescriptionsItem label="订单编号">{{ orderInfo?.suborderNo }}</DescriptionsItem>
            </Descriptions>
          </div>
        </div>
        <div class="text-xl pb-2 mt-3">商品信息</div>
        <div class="border border-solid border-[#E5E6EB]">
          <BasicTable @register="registerTable2" :scroll="{ x: 1500, y: 2000 }">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'productName'">
                <div class="flex items-center">
                  <div class="flex-shrink-0">
                    <Image
                    :src="record.imageUrl"
                    width="67px"
                    height="67px"
                    style="object-fit: cover;"
                    ></Image>
                  </div>
                  <div class="pl-2">{{ record.productName }}</div>
                </div>
              </template>
            </template>
          </BasicTable>
          <div class="flex justify-between pt-2">
            <div></div>
            <Descriptions :column="1" size="small" style="width: 220px">
              <DescriptionsItem>
                <template #label><div class="w-16 text-right">商品总价</div></template>
                <div class="w-32 text-right font-bold">{{ orderInfo?.totalAmount }}</div>
              </DescriptionsItem>
              <DescriptionsItem>
                <template #label><div class="w-16 text-right">运费</div></template>
                <div class="w-32 text-right font-bold">{{ orderInfo?.freightPrice }}</div>
              </DescriptionsItem>
              <DescriptionsItem>
                <template #label><div class="w-16 text-right">优惠</div></template>
                <div class="w-32 text-right font-bold">{{ orderInfo?.preferentialPrice }}</div>
              </DescriptionsItem>
              <DescriptionsItem>
                <template #label><div class="w-16 text-right">实付款</div></template>
                <div class="w-32 text-right font-bold text-[#F43E06]">{{ orderInfo?.payAmount }}</div>
              </DescriptionsItem>
            </Descriptions>
          </div>
        </div>

        <div class="text-xl pb-2 mt-3">
          <span> 佣金信息 </span>
          <Tag :color=settlementStatusTag?.dictType>{{ settlementStatusTag?.dictLabel }}</Tag>
        </div>
        <BasicTable @register="registerTable" :scroll="{ x: 1500, y: 2000 }"> </BasicTable>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Card, Tag, Descriptions, DescriptionsItem, Image } from 'ant-design-vue';
  import { computed, onMounted, ref, unref } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { formatMoney } from '@/utils/number';
  import { IOrderSettlementDetail } from '@/api/hby/orderSettlement/type';
  import { useRoute } from 'vue-router';
  import { getOrderDetail } from '@/api/hby/resourceLeague/index';
  import Dictionary from '@/utils/dictionary';

  onMounted(() => {
    queryOrderSettlementDtail();
  });
  
  const route = useRoute();
  
  const orderInfo = ref();
  const detailData = ref<IOrderSettlementDetail>();
  const dicts = Dictionary.getLocalMulti(['settlementStatus', 'orderPayStatus', 'orderStatus', 'logisticsMode']);

  const queryOrderSettlementDtail = async () => {
    const res = await getOrderDetail(route.query.id as unknown as number);

    // 订单信息处理
    orderInfo.value = {
      createTime: res.createTime, // 下单时间

      payAmount: isNaN(res.payAmount) ? res.payAmount : formatMoney({ money: res.payAmount || 0, isShowFree: false }), // 实付金额
      payMode: res.payMode, // 付款方式
      payTime: res.payTime, // 付款时间

      orderStatus: res.orderStatus, // 订单状态
      logisticsModeText: dicts.logisticsMode.find((v) => v.dictValue == res.logisticsMode)?.dictLabel, // 物流模式

      shopName: res.shopName, // 订单来源
      templateName: res.templateName, // 出单板块
      suborderNo: res.orderNo,// 订单编号

      totalAmount: isNaN(res.totalAmount) ? res.totalAmount : formatMoney({ money: res.totalAmount || 0, isShowFree: false }), // 商品总价
      freightPrice: isNaN(res.freightPrice) ? res.freightPrice : formatMoney({ money: res.freightPrice || 0, isShowFree: false }), // 运费
      preferentialPrice: isNaN(res.preferentialPrice) ? res.preferentialPrice : formatMoney({ money: res.preferentialPrice || 0, isShowFree: false }), // 优惠
    }

    // 商品信息处理
    res.productMapVoList.forEach(item => {
      item.productPrice = isNaN(item.productPrice) ? item.productPrice : formatMoney({ money: item.productPrice, isShowFree: false }),
      item.totalAmount = isNaN(item.totalAmount) ? item.totalAmount : formatMoney({ money: item.totalAmount, isShowFree: false })
      item.discountAmount = isNaN(item.discountAmount) ? item.discountAmount : formatMoney({ money: item.discountAmount, isShowFree: false })
    });
    setTableData2(res.productMapVoList);

    // 佣金信息处理
    detailData.value = res.settleDetailList;
    detailData.value!.settleInfoList = detailData.value!.settleInfoList.map((item) => {
      return {
        ...item,
        distributionAmount: isNaN(item.distributionAmount)
          ? item.distributionAmount
          : formatMoney({ money: item.distributionAmount, isShowFree: false }),
        settleAmount: isNaN(item.settleAmount)
          ? item.settleAmount
          : formatMoney({ money: item.settleAmount, isShowFree: false }),
      };
    });
    setTableData(detailData.value!.settleInfoList);
  };

  // 订单状态 tag显示
  const orderStatusTag = computed(()=>{
    return dicts.orderStatus.find((v) => v.dictValue == unref(orderInfo)?.orderStatus)
  });

  // 结算状态 tag显示
  const settlementStatusTag = computed(()=>{
    return dicts.settlementStatus.find((v) => v.dictValue == unref(detailData)?.settStatus)
  });

  const [registerTable2, { setTableData: setTableData2 }] = useTable({
    columns: [
      {
        title: '商品名称',
        dataIndex: 'productName',
        width: 272,
      },
      {
        title: '规格',
        dataIndex: 'productSkuName',
        width: 200,
      },
      {
        title: '单价(元)',
        dataIndex: 'productPrice',
        width: 100,
        align: 'center',
      },
      {
        title: '数量',
        dataIndex: 'productNum',
        width: 100,
        align: 'center',
      },
      {
        title: '小计(元)',
        dataIndex: 'totalAmount',
        width: 100,
        align: 'center',
      },
      {
        title: '优惠减免(元)',
        dataIndex: 'discountAmount',
        width: 120,
        align: 'center',
      }
    ],
    showIndexColumn: true,
    pagination: false,
  });

  const [registerTable, { setTableData }] = useTable({
    columns: [
      {
        title: '商户',
        dataIndex: 'merchantName',
        width: 100,
      },
      {
        title: '商户号',
        dataIndex: 'saasMerchantNo',
        width: 100,
      },
      {
        title: '预估收益',
        dataIndex: 'distributionAmount',
        width: 100,
      },
      {
        title: '结算金额',
        dataIndex: 'settleAmount',
        width: 100,
      },
      {
        title: '结算类型',
        dataIndex: 'settleTypeName',
        width: 100,
      },
      {
        title: '结算时间',
        dataIndex: 'settleDate',
        width: 214,
      },
    ],
    showIndexColumn: true,
    pagination: false,
  });
</script>

<style lang="less" scoped></style>
